import * as React from 'react';
import { forwardRef } from 'react';
import './index.scss';

// 确保createElement可用
const { createElement } = React;

export interface IconStatProps {
  /**
   * 左侧图标图片地址
   */
  icon?: string;

  /**
   * 数值
   */
  value?: string | number;

  /**
   * 显示的文字标签
   */
  label?: string;

  /**
   * 组件尺寸
   */
  size?: 'small' | 'medium' | 'large';

  /**
   * 主题样式
   */
  theme?: 'light' | 'dark';

  /**
   * 布局方向
   */
  direction?: 'horizontal' | 'vertical';

  /**
   * 是否显示数值
   */
  showValue?: boolean;

  /**
   * 点击事件
   */
  onClick?: () => void;

  /**
   * 自定义样式
   */
  style?: React.CSSProperties;

  /**
   * 自定义类名
   */
  className?: string;

  // 低代码平台相关属性（不会传递到DOM）
  __designMode?: string;
  componentId?: string;
  _componentName?: string;
  forwardRef?: any;
}

const IconStat = forwardRef<HTMLDivElement, IconStatProps>((props, ref) => {
  const {
    icon = '',
    value = 0,
    label = '告警数',
    size = 'medium',
    theme = 'dark',
    direction = 'horizontal',
    showValue = true,
    onClick,
    style = {},
    className = '',
    __designMode,
    componentId,
    _componentName,
    forwardRef: forwardRefProp,
    ...otherProps
  } = props;

  const handleClick = () => {
    if (onClick) {
      onClick();
    }
  };

  const classNames = [
    'hzdz-icon-stat',
    `hzdz-icon-stat--${size}`,
    `hzdz-icon-stat--${theme}`,
    `hzdz-icon-stat--${direction}`,
    className
  ].filter(Boolean).join(' ');

  // 构建右侧内容
  const rightContent = [];
  
  if (showValue && value !== undefined && value !== null) {
    rightContent.push(createElement('div', {
      key: 'value',
      className: 'hzdz-icon-stat__value'
    }, String(value)));
  }

  if (label) {
    rightContent.push(createElement('div', {
      key: 'label',
      className: 'hzdz-icon-stat__label'
    }, label));
  }

  return createElement('div', {
    ref,
    className: classNames,
    style,
    onClick: handleClick,
    ...otherProps
  }, [
    // 左侧图标
    icon && createElement('div', {
      key: 'icon',
      className: 'hzdz-icon-stat__icon'
    }, createElement('img', {
      src: icon,
      alt: label,
      className: 'hzdz-icon-stat__icon-img'
    })),

    // 右侧内容容器
    rightContent.length > 0 && createElement('div', {
      key: 'content',
      className: 'hzdz-icon-stat__content'
    }, rightContent)
  ].filter(Boolean));
});

IconStat.displayName = 'IconStat';

export default IconStat; 